<template>
	<view class="frame">
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="false" title="工作台">
			<view slot="right">
			   <image src="/static/message/more.png"  style="margin-right: 32rpx;margin-left: 40rpx;width: 43rpx;height: 10rpx;" @click="go('/pages3/set/set')" ></image>
			</view>
		</u-navbar>
		
		<view style="position: fixed;width: 750rpx;z-index: 10;padding: 0rpx 32rpx;background: #FFFFFF;">
		 <u-search placeholder="搜索" v-model="keyword" :show-action="false" :height="68"></u-search>
		 <u-tabs :list="tabList" style="margin-top: 18rpx;" :is-scroll="false" active-color="#0052D9" inactive-color="#858A99" :current="current" 
		 @change="change"></u-tabs>
		</view>
		
		<view style="width: 750rpx;height: 160rpx;"></view>
		<view class="allwrap">
			<view class="frame-item" v-for="(item,index) in list " :key="index" @click="go('/pages4/detail/detail')">
				<view class="flexal frame-title">
					<view style="width: 75%;flex: 1;">{{item.title}}</view>
					<view class="frame-time">{{item.time}}</view>
				</view>
				<view class="frame-date">
					<view style="width: 55%;">
						<view style="display: flex;">
						<view>请假日期：</view>
						<view style="width: 100%;">{{item.date}}</view>
						</view>
						<view style="display: flex;margin-top: 10rpx;margin-bottom: 32rpx;" v-if="item.status == 2">
						<view>驳回原因：</view>
						<view style="width: 100%;">{{item.turnDown}}</view>
						</view>
					</view>
					<view style="flex: 1;"></view>
					<image src="/static/work/in-review.png" style="width: 98rpx;height: 98rpx;" v-if="item.status == 0"></image>
					<image src="/static/work/pass.png" style="width: 98rpx;height: 98rpx;" v-if="item.status == 1"></image>
					<image src="/static/work/refuse.png" style="width: 98rpx;height: 98rpx;" v-if="item.status == 2"></image>
				</view>
				<view class="flexal">
					<image :src="item.avatar" style="width: 68rpx;height: 68rpx;border-radius: 50%;"></image>
					<view style="margin-left: 16rpx;">
						<view style="font-weight: 400;font-size: 26rpx;color: #000000;">{{item.name}}</view>
						<view style="font-weight: 400;font-size: 20rpx;color: #999999;margin-top: 5rpx;">{{item.section}}</view>
					</view>
				</view>
				<view style="padding: 28rpx 0rpx;" v-if="item.status == 0">
				<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
				</view>
				<view class="flexal" style="justify-content: flex-end;" v-if="item.status == 0">
					<view class="button-frame flexcen">拒绝</view>
					<view class="button-frame flexcen" style="margin-left: 32rpx;background: #0052D9;color: #FFFFFF;">同意</view>
				</view>
			</view>
		</view>
		
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
		
		<!-- 底部导航栏 -->
		<u-tabbar v-model="tabs" :list="common_bottom" inactive-color="#858A99" active-color="#0052D9" :border-top="false" icon-size="56" height="120" bg-color="#fff"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				common_bottom: getApp().globalData.common_bottom,
				tabList:[{
					name: '待处理'
				}, {
					name: '已处理'
				}],
				current:0,
				avatar:'https://cdn.uviewui.com/uview/album/10.jpg',
				list:[
					{
						title:'员工名称提交的请假申请',
						time:'2024-09-14',
						date:'2024-09-22、2024-09-23、2024-09-24',
						turnDown:'不可以',
						name:'员工名称',
						section:'部门名称',
						status:0,				//0:审核中 1:通过 2:驳回
						avatar:'https://cdn.uviewui.com/uview/album/10.jpg',
					},{
						title:'员工名称提交的请假申请',
						time:'2024-09-14',
						date:'2024-09-22、2024-09-23、2024-09-24',
						turnDown:'不可以',
						name:'员工名称',
						section:'部门名称',
						status:1,				//0:审核中 1:通过 2:驳回
						avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
					},{
						title:'员工名称提交的请假申请',
						time:'2024-09-14',
						date:'2024-09-22、2024-09-23、2024-09-24',
						turnDown:'不可以',
						name:'员工名称',
						section:'部门名称',
						status:2,				//0:审核中 1:通过 2:驳回
						avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
					},
				]
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			
			
		},
		methods: {
			// 修改tabs
			change(index){
				this.current = index;
			}
			
		}
	}
</script>
<style scoped lang="less">
	.frame{
		background: #F8F8F8;
	}
	.icon{
			width: 40rpx;
			height: 40rpx;
		}
	.frame-item{
		margin-top: 32rpx;
		padding: 29rpx 32rpx 20rpx 32rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #FFFFFF;
		.frame-title{
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			// background: #000;
		}
		.frame-time{
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
		}
		.frame-date{
			margin-top: 29rpx;
			display: flex;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}
		.button-frame{
			width: 120rpx;
			height: 58rpx;
			background: #FFFFFF;
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			border: 2rpx solid #0052D9;
			font-size: 28rpx;
			color: #0052D9;
		}
	}
</style>
